<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ssm" uri="http://ssm.elangzhi.com/jsp/tag/functions" %>
    <input type="hidden" id="userId" value="${userId}"/>
    <div style="margin-left: 40px">
        <h4 style="height: 40px ; margin-top: 20px">日期:</h4>
        <button class="btn btn-sm btn-success" name="form-field-radio"
                type="button" style="margin-top: -10px;" onclick="evaluateUser('0')">今天</button>
        <button class="btn btn-sm btn-info" name="form-field-radio"
                type="button" style="margin-top: -10px;" onclick="evaluateUser('1')">本月</button>
        <button class="btn btn-sm btn-warning" name="form-field-radio"
                type="button" style="margin-top: -10px;" onclick="evaluateUser('2')">今年</button>
        <h4 style="height: 40px; margin-top: 25px">选择统计时间：</h4>
        <div class="input-append date">
            <input class=" date-picker" id="date_start" name="date_start"
                   type="text" data-date-format="yyyy-mm-dd"
                   style="width: 120px; height: 25px;" pattern="yyyy-MM-dd"
                   placeholder="开始时间" onchange="date()"/> <span class="add-on"><i
                class="icon-calendar"></i></span>
        </div>
        <h4>至：</h4>
        <div class="input-append date">
            <input class="span5 date-picker" id="date_end" name="date_end"
                   type="text" data-date-format="yyyy-mm-dd"
                   style="width: 120px; height: 25px;" pattern="yyyy-MM-dd"
                   placeholder="结束时间" /> <span class="add-on"><i
                class="icon-calendar"></i></span>
        </div>
        <div style="margin-top: 20px">
            <a class="btn btn-mini btn-light  btn-danger" href="javascript:void(0);" onclick='evaluateUser(3);' title="检索">
                <i id="nav-search-icon" class="icon-search">确认统计</i>
            </a>
        </div>


        <div>
            <div id="echarts-line" style="height: 400px; width: 800px;"></div>
        </div>
    </div>


<script src="/static/js/echarts.js"></script>


<script type="text/javascript">
    $(function(){
        //初始化页面
        initPage();
    });
    $('.date-picker').datetimepicker({
        language: 'zh-CN',
        minView: "month",//设置只显示到月份
        format: 'yyyy/mm/dd',
        autoclose: true,
        todayBtn: true,
        todayHighlight:true,
        initialDate: new Date(),
    });

    function reloadData(){
        <%--var starttime = $('#date_start').val().valueOf().toString();--%>
        <%--var endtime =$('#date_end').val().valueOf().toString();--%>
        <%--window.location.href="<%=basePath%>statisticmgr/leaderfiledoubletime.do?starttime="+starttime+"&endtime="+endtime--%>
    }




    function evaluateUser(type) {

        // 基于准备好的dom，初始化echarts实例
        var id = $("#userId").val();
        var start = $("#date_start").val();
        var end = $("#date_end").val();
        if (end ==''){
            start = new Date();
            end = new Date();
        }
        var myChart = echarts.init(document.getElementById('echarts-line'));
        myChart.showLoading();
        $.ajax({
            url:"/users/countEvaluate_pie",
            dataType:"json",
            data:{"userId":id,"type":type,"start":start,"end":end},
            type:"post",
            success:function (data) {
                if(data.success && data.data.length!=0) {
                    myChart.hideLoading();
                    myChart.setOption({
                        title: {
                            text:'评价统计',
                            x: 'right'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {//图例
                            orient: 'vertical',
                            left: 'left',
                            data: function () {
                                var res=[];
                                $.each(data.data,function(key,vale){
                                    res.push({
                                        name:vale.name,
                                    });
                                });
                                return res;
                            }()
                        },
                        series: [
                            {
                                name: '评价统计',
                                type: 'pie',
                                radius: '55%',
                                data: function () {
                                    var res = [];
                                    $.each(data.data, function (key, vale) {
                                        res.push({
                                            value: vale.value,
                                            name: vale.name
                                        });
                                    });
                                    return res;
                                }()
                            }
                        ]
                    })
                }else{
                    myChart.hideLoading();
                    myChart.setOption({
                        title: {
                            text:'评价统计',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {//图例
                            orient: 'vertical',
                            left: 'left',
                            data: function () {
                                var res=[];
                                res.push(
                                    { name: "不满意"},
                                    { name: "一般"},
                                    { name: "满意"},
                                    { name: "非常满意"},
                                );
                                return res;
                            }()
                        },
                        series: [
                            {
                                name: '消费方式',
                                type: 'pie',
                                radius: '55%',
                                data: function () {
                                    var res = [];
                                    res.push(
                                        { name: "不满意",value:0},
                                        { name: "一般",value:0},
                                        { name: "满意",value:0},
                                        { name: "非常满意",value:0},
                                    );
                                    return res;
                                }()
                            }
                        ]
                    })
                }
            },

        })
    }

</script>

